<template>
    <view class="main" :style="themeColor">
        <view class="message-box">
            <view v-if="!isSetPwd" class="input-box">
                <text class="title">手机号</text>
                <input type="number" v-model="tel" placeholder="请输入手机号" />
            </view>
            <view v-if="!isSetPwd" class="input-box">
                <text class="title">验证码</text>
                <input v-model="captcha" type="number" placeholder="请输入验证码" />
                <view @click="getCode" class="get-btn">{{ isGet ? "请等待" + time + "秒" : "获取验证码" }}</view>
            </view>
            <view v-if="isSetPwd" class="input-box">
                <text class="title">当前密码</text>
                <input type="number" password="true" v-model="oldPassword" placeholder="请输入当前密码" /> </view
            ><view class="input-box">
                <text class="title">输入新密码</text>
                <input type="number" password="true" v-model="newPwd" placeholder="请输入新密码" />
            </view>
            <view class="input-box">
                <text class="title">确认新密码</text>
                <input type="number" password="true" v-model="againPwd" placeholder="确认新密码" />
            </view>
        </view>
        <view class="change-save-btn" @click="submit">保存</view>
    </view>
</template>

<script>
import { SendSmsNoVerifyCode, SetPayPassword } from "@/service/api/member.js"
import storage from "@/uni-sub-base/utils/storage.js"

export default {
    data() {
        return {
            isGet: false,
            time: 60,
            tel: "",
            oldPassword: "",
            newPwd: "",
            againPwd: "",
            captcha: "",
            isSetPwd: false,
        }
    },
    onLoad(e) {
        if (e.isSetPwd == "true") {
            this.isSetPwd = true
        } else if (e.isSetPwd == "false") {
            this.isSetPwd = false
        }
    },
    mounted() {},
    methods: {
        submit() {
            if (!this.tel && !this.isSetPwd) {
                this.easyToast("请输入手机号")
            } else if (!this.captcha && !this.isSetPwd) {
                this.easyToast("请输入验证码")
            } else if (!this.newPwd) {
                this.easyToast("请输入新密码")
            } else if (!this.againPwd) {
                this.easyToast("请输入确认新密码")
            } else if (this.newPwd != this.againPwd) {
                this.easyToast("输入的密码不一致")
            } else {
                const firstParams = {
                    tel: this.tel,
                    "validCode:": this.captcha,
                    validType: 0,
                    oldPassword: "",
                    password: this.newPwd,
                }
                const newParams = {
                    oldPassword: this.oldPassword,
                    password: this.newPwd,
                }
                const finalParams = this.isSetPwd ? newParams : firstParams
                SetPayPassword(finalParams).then((res) => {
                    if (res.State == 1) {
                        this.easyGoBack()
                        this.easyToast("修改成功")
                    } else {
                        this.easyToast(res.Msg)
                    }
                })
            }
        },
        getCode() {
            let tel = storage.getCache("userInfo").Tel
            if (this.tel == "" || !this.tel) {
                this.easyToast("请输入手机号")
            } else if (this.tel != tel) {
                this.easyToast("请输入正确的手机号")
            } else {
                this.isGet = true
                this.countDown()
            }
        },
        countDown() {
            if (this.time == 60) {
                let path = "?tel=" + this.tel + "&validType=8"
                SendSmsNoVerifyCode(path).then((res) => {})
                let t = setInterval(() => {
                    if (this.time > 0) {
                        this.time = this.time - 1
                    } else {
                        this.isGet = false
                        clearInterval(t)
                        this.time = 60
                    }
                }, 1000)
            } else {
                this.easyToast("请等待" + this.time + "秒后再次点击")
            }
        },
    },
}
</script>

<style lang="scss">
.main {
    display: flex;
    flex-direction: column;
    .change-save-btn {
        align-self: center;
        color: #ffffff;
        border-radius: 56rpx;
        width: 94vw;
        padding: 20rpx 0;
        text-align: center;
        margin-top: 40rpx;
        background: $app-color-main;
    }
}

.message-box {
    background-color: $color-white;
    margin-top: 20rpx;
    display: flex;
    flex-direction: column;
}

.input-box {
    display: flex;
    align-items: center;
    height: 112rpx;
    font-size: $size-32;
    margin-left: $size-32;
    border-bottom: 1rpx solid $uni-border-bottom-color;

    .title {
        width: 204rpx;
        font-size: $size-32;
    }

    input {
        flex: 1;
    }

    .get-btn {
        width: 160rpx;
        background-color: $color-white;
        color: $color-blue;
        padding: 15rpx 15rpx;
        line-height: 24rpx;
        font-size: $size-32;
    }
}
</style>
